<template>
  <div class="app-container">
    <el-row v-loading="loading">
      <el-col :span="20">
        <el-row class="">
          <!-- 左边列 -->
          <el-col :span="7">
            <div class="input-container">
              <div class="text-bold margin-little-bottom">左边列:{{ handle.left.length }}</div>
              <el-input
                v-model="left"
                type="textarea"
                :rows="9"
                placeholder="左边列"
                @blur="parseColumns('left')"
              />
            </div>
          </el-col>
          <!-- 右边列 -->
          <el-col :span="7" class="margin-small-left">
            <div class="input-container">
              <div class="text-bold margin-little-bottom">右边列:{{ handle.right.length }}</div>
              <el-input
                v-model="right"
                type="textarea"
                :rows="9"
                placeholder="右边列"
                @blur="parseColumns('right')"
              />
            </div>
          </el-col>
          <!-- 忽略列 -->
          <el-col :span="7" class="margin-small-left">
            <div class="input-container">
              <div class="text-bold margin-little-bottom">忽略列:{{ handle.ignore.length }}</div>
              <el-input
                v-model="ignore"
                type="textarea"
                :rows="9"
                placeholder="忽略列"
                @blur="parseColumns('ignore')"
              />
            </div>
          </el-col>
        </el-row>

        <el-row>
          <!-- 左边多出列 -->
          <el-col :span="7">
            <div class="input-container">
              <div class="text-bold ">
                <el-button type="text" class="text-forestgreen" icon="el-icon-document-copy" @click="copyText(leftMuti,$event)">复制</el-button>
                左边比右边多出列:{{ handle.leftMuti.length }}
              </div>
              <el-input
                v-model="leftMuti"
                type="textarea"
                :rows="9"
                placeholder="左边多于右边"
              />
            </div>
          </el-col>
          <!-- 右边列 -->
          <el-col :span="7" class="margin-small-left">
            <div class="input-container">
              <div class="text-bold ">
                <el-button type="text" class="text-forestgreen" icon="el-icon-document-copy" @click="copyText(rightMuti,$event)">复制</el-button>
                右边比左边多出列:{{ handle.rightMuti.length }}
              </div>
              <el-input
                v-model="rightMuti"
                type="textarea"
                :rows="9"
                placeholder="右边多余左边"
              />
            </div>
          </el-col>
          <!-- 相等的列 -->
          <el-col :span="7" class="margin-small-left">
            <div class="input-container">
              <div class="text-bold " >
                <el-button type="text" class="text-forestgreen" icon="el-icon-document-copy" @click="copyText(equal,$event)">复制</el-button>
                相等的列:{{ handle.equal.length }} <i class="el-icon-microphone" title="当两边相等时, 使用左边列原始值"></i>
              </div>
              <el-input
                v-model="equal"
                type="textarea"
                :rows="9"
                placeholder="相等列"
              />
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="4">
        <el-checkbox @change="changeSetting" v-model="setting.ignoreAb" label="忽略大小写" />
        <el-checkbox @change="changeSetting" v-model="setting.ignoreUnderline" label="忽略下划线" />
        <el-checkbox @change="changeSetting" v-model="setting.ignoreSpace" checked label="忽略空白" />

        <div class="margin-top">
          <el-button type="primary" size="small" @click="compare">开始比较</el-button>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import clip from '@/utils/clipboard'
import {inArray} from '@/utils'

export default {
  name: 'Compare',
  data() {
    return {
      loading: false,
      left: null,
      right: null,
      ignore: null,
      rightMuti: null,
      leftMuti: null,
      equal: null,
      handle: {
        left: [],
        right: [],
        ignore: [],
        rightMuti: [],
        leftMuti: [],
        equal: []
      },
      setting: {
        ignoreAb: false,
        ignoreUnderline: false,
        ignoreSpace: true
      }
    }
  },
  methods: {
    copyText(text, event) {
      clip(text, event)
    },
    changeSetting(){
      this.parseColumns('left');
      this.parseColumns('right')
    },
    parseColumns(mark) {
      // const value = event.target.value.trim().split('\n')
      if (!this[mark]){
        return
      }
      let value = this[mark].trim().split('\n')

      const handleValue = []
      for (let i = 0; i < value.length; i++) {
        let item = value[i]
        if (this.setting.ignoreSpace) {
          item = item.trim()
        }
        if (this.setting.ignoreAb) {
          item = item.toLowerCase()
        }
        if (this.setting.ignoreUnderline) {
          item = item.replace(/_/g, '')
        }
        if (item) {
          handleValue.push({origin: value[i],handle: item})
        }
      }

      this.handle[mark] = handleValue
    },
    compare() {
      this.loading = true

      let needCompare = true
      // 重新初始化 leftMuti,rightMuti,equal
      this.handle.rightMuti = []
      this.handle.leftMuti = []
      this.handle.equal = []

      if (this.handle.ignore.length === 0) {
        // 没有需要忽略的列
        if (this.handle.right.length > 0 && this.handle.left.length === 0) {
          this.handle.rightMuti = this.handle.right.map(item => item.origin)
          needCompare = false
        } else if (this.handle.right.length === 0 && this.handle.left.length > 0) {
          this.handle.leftMuti = this.handle.left.map(item => item.origin)
          needCompare = false
        }
      } else {
        // 去除需要忽略的列
        if (this.handle.right.length > 0 && this.handle.left.length === 0) {
          // 右边多出全部列
          for (let i = 0; i < this.handle.right.length; i++) {
            // 使用原始列去比较忽略列
            if (inArray(this.handle.right[i].origin, this.handle.ignore) === -1) {
              this.handle.rightMuti.push(this.handle.right[i].origin)
            }
          }
          needCompare = false
        } else if (this.handle.right.length === 0 && this.handle.left.length > 0) {
          for (let i = 0; i < this.handle.left.length; i++) {
            if (inArray(this.handle.left[i].origin, this.handle.ignore) === -1) {
              this.handle.leftMuti.push(this.handle.left[i].origin)
            }
          }
          needCompare = false
        }
      }

      // 其它情况都需要比较
      if (needCompare) {
        // 统计相同的列
        for (let i = 0; i < this.handle.left.length; i++) {
          // 首先过滤忽略的列
          if (inArray(this.handle.left[i].origin, this.handle.ignore) !== -1) {
            continue
          }
          for (let j = 0; j < this.handle.right.length; j++) {
            if (this.handle.left[i].handle === this.handle.right[j].handle) {
              this.handle.equal.push(this.handle.left[i])
              break
            }
          }
        }

        // 统计旧列比新列多出的列 注:比较的列中不能有分号
        let eqColsHandle = ';' + this.handle.equal.map(item => item.handle).join(';') + ';'		// 相同的列
        for (let i = 0; i < this.handle.left.length; i++) {
          // 首先过滤忽略的列
          if (inArray(this.handle.left[i].origin, this.handle.ignore) !== -1) {
            continue
          }
          if (eqColsHandle.indexOf(';' + this.handle.left[i].handle + ';') === -1) {
            this.handle.leftMuti.push(this.handle.left[i].origin)
          }
        }

        // 统计新列比旧列多出的列
        for (let i = 0; i < this.handle.right.length; i++) {
          // 首先过滤忽略的列
          if (inArray(this.handle.right[i].origin, this.handle.ignore) !== -1) {
            continue
          }
          if (eqColsHandle.indexOf(';' + this.handle.right[i].handle + ';') === -1) {
            this.handle.rightMuti.push(this.handle.right[i].origin)
          }
        }
      }

      this.loading = false

      // 转换数据
      this.leftMuti = this.handle.leftMuti.join('\n')
      this.rightMuti = this.handle.rightMuti.join('\n')
      this.equal = this.handle.equal.map(item => item.origin).join('\n')

    }
  }
}
</script>

<style scoped>
  button{
    padding-top: 8px;
    padding-bottom: 8px;
  }
.input-container{
  padding: 0 15px;
}
  /deep/ .input-container textarea{
    white-space: nowrap;
    overflow: scroll;
  }
</style>
